import { View, Image } from '@tarojs/components'
import '../index.scss'
import { useHomePage } from '@/hooks/index'
import { memo, useState } from 'react'

interface RightBarProps {
  item: any
}

const RightBar = memo(
  ({ item }: RightBarProps) => {
    const { showComment } = useHomePage()
    const [like, setLike] = useState(false)
    const [collect, setCollect] = useState(false)

    const hanldeOpenComment = () => {
      showComment(item)
    }

    return (
      <>
        <View className="right_bar">
          <View className="avctir">
            <Image src="https://pic.imgdb.cn/item/63fca023f144a01007242e89.jpg" />
            <View className="gz">+</View>
          </View>
          <View
            onClick={() => setLike(!like)}
            className="icon_box flex flex-cloumn align-center justify-center"
          >
            <View
              className={`${like ? 'at-icon-heart-2 icon_select' : 'at-icon-heart'} at-icon icon`}
            />
            456
          </View>
          <View
            onClick={hanldeOpenComment}
            className="icon_box flex flex-cloumn align-center justify-center"
          >
            <View className="at-icon at-icon-message icon" />
            888
          </View>
          <View
            onClick={() => setCollect(!collect)}
            className="icon_box flex flex-cloumn align-center justify-center"
          >
            <View
              className={`${collect ? 'at-icon-star-2 icon_select2' : 'at-icon-star'} at-icon  icon`}
            />
            12
          </View>
          <View className="icon_box flex flex-cloumn align-center justify-center">
            <View className="at-icon at-icon-share icon" />
            36
          </View>
        </View>
      </>
    )
  },
  (prev, next) => {
    return prev.item.id === next.item.id
  }
)

export default RightBar
